<template>
  <div id="goods">
    <div class="my-bar">
      <div class="my-bar-left">
        <div class="arrow-left-con">
          <van-icon name="arrow-left" @click.native="$router.go('-1')"/>
        </div>
      </div>
    </div>
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
        <img :src="thumb" width="100%">
      </van-swipe-item>
    </van-swipe>

    <van-cell-group>
      <van-cell>
        <div class="goods-title">学生时间管理效率手册 周计划本手账记事本日程本 笔记本子手帐本</div>
        <div class="goods-price">
          <del>￥14.90</del>
          <div><img src="../../static/img/yh.png" /><span>7元</span></div>
          <span>已售5.1万</span>
        </div>
        <div class="dsj">
          <span>￥490.00</span><span>到手价</span>
        </div>
      </van-cell>
    <div class="fxz">
      <div><span>分享赚</span><span>自购或分享，立赚</span><span>￥3.5</span></div>
      <div><span>升级赚</span><span>升级团长，立赚</span><span>￥3.5</span></div>
    </div>
    </van-cell-group>
    <van-cell-group class="goods-cell-group">
      <van-cell title="查看商品详情(点击查看详情)" is-link @click="solide()" />
    </van-cell-group>
    <div id="goodslist" v-if="show">
      <div class="my-sub-header">商品图片</div>
      <img v-for="item,index in goods.thumb" :src="item" :key="index" width="100%"/>
    </div>

    <van-goods-action>
      <van-goods-action-mini-btn icon="chat" @click="sorry">
        客服
      </van-goods-action-mini-btn>
      <van-goods-action-mini-btn icon="cart" @click="onClickCart">
        购物车
      </van-goods-action-mini-btn>
      <van-goods-action-big-btn @click="sorry">
        加入购物车
      </van-goods-action-big-btn>
      <van-goods-action-big-btn primary @click="sorry">
        立即购买
      </van-goods-action-big-btn>
    </van-goods-action>
    <van-sku v-model="showBase" :sku="sku" :goods="goods" :goods-id="goodsId" />
  </div>
</template>

<script>
  export default {
    name: 'goods',
    data() {
      return {
        showBase: false,
        goodsId: "111",
        show:false,
        goods: {
          title: '美国伽力果（约680g/3个）',
          price: 2680,
          express: '免运费',
          remain: 19,
          thumb: [
            'static/img/QQ截图20181006101946.png',
            'static/img/QQ截图20181006101830.png'
          ]
        },
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [{
            k: '颜色', // skuKeyName：规格类目名称
            v: [{
              id: '30349', // skuValueId：规格值 id
              name: '红色', // skuValueName：规格值名称
              imgUrl: 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg' // 规格类目图片，只有第一个规格类目可以定义图片
            },
              {
                id: '1215',
                name: '蓝色',
                imgUrl: 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg'
              }
            ],
            k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          }],
          // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
          list: [{
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
            stock_num: 110 // 当前 sku 组合对应的库存
          }, {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: '30349', // 规格类目 k_s 为 s1 的对应规格值 id
            stock_num: 110 // 当前 sku 组合对应的库存
          }],
          price: '1.00', // 默认价格（单位元）
          stock_num: 227, // 商品总库存
          collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
          none_sku: false, // 是否无规格商品
          hide_stock: false // 是否隐藏剩余库存
        }
      }
    },
    methods: {
      goOrder() {
        this.$router.push("order");
      },
      formatPrice() {
        return '¥' + (this.goods.price / 100).toFixed(2);
      },
      onClickCart() {
        this.$router.push('cart');
      },
      solide() {
        var $this=this;
        if ($this.show){
          $this.show=false
        } else {
          $this.show=true
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #goods {
    padding-bottom: 50px;
  }
  .arrow-left-con{
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 2;
    width: 30px;
    height:30px;
    border-radius:30px;
    background:rgba(0,0,0,.3);
    line-height:35px;
    color: #ffffff;
  }
  .goods-title{
    font-family: 黑体;
    font-size: 16px;
    font-weight: bold;
    width:75%;
  }
  .goods-price{
    width: 100%;
    margin-top: 15px;
  }
  .goods-price>del{
    float: left;
    font-size: 16px;
  }
  .goods-price>span{
    float: left;
    color: #a8a9a9;
    font-size: 14px;
    margin-left: 18px;
  }
  .goods-price:after {
    content:"";
    width: 0;
    height: 0;
    clear: both;
    display:block;
  }
  .goods-price>div{
    position: relative;
    font-size: 14px;
    color: #000;
    width: 60px;
    height: 20px;
    text-align: right;
    float: left;
    margin-left: 18px;
  }
  .goods-price>div>span{
    position: absolute;
    right:10px;
    top:-2px;
    z-index:1;
    color: #ffffff;
    font-size:14px;
  }
  .goods-price>div>img{
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  .dsj{
    margin-top: 15px;
  }
  .dsj>span{
    color: #f41e2e;
    font-size: 14px;
  }
  .dsj>span:first-child{
    font-size:26px;
    color: #f41e2e;
    margin-right:5px;
  }
  .fxz{
    width: 100%;
    background: #fffbff;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    text-align: left;
  }
  .fxz>div{
    width: 85%;
    margin: 0 auto;
  }
  .fxz>div>span:first-child{
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #f41e2e;
    border-radius:25px;
    color: #f41e2e;
    margin-right: 8px;
  }
  .fxz>div>span:last-child{
    color: #f41e2e;
  }
  .fxz>div:last-child {
    margin-top: 10px;
  }
  .fxz>div:last-child>span:first-child{
    border: 1px solid #000;
    color: #000;
  }
  .fxz>div:last-child>span:last-child{
    color: #f41e2e;
  }
</style>
<style>
  #goods .goods-cell-group{
    text-align: left;
  }
</style>
